<!-- questions 试题管理 -->
<template>
  <div class="content">
    <el-form :model="query" ref="searchForm" label-width="100px" size="medium" class="search-form">
      <el-form-item label="试题题目：" prop="title">
        <el-input v-model="query.title" placeholder="请输入试题题目" @keyup.enter.native="handleSearch"></el-input>
      </el-form-item>
      <el-form-item label="试题类型：" prop="type">
        <el-select v-model="query.type" placeholder="请选择试题类型" clearable>
          <el-option label="全部" value=""></el-option>
          <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="试题难度：" prop="difficult">
        <el-select v-model="query.difficult" placeholder="请选择试题难度" clearable>
          <el-option label="全部" value=""></el-option>
          <el-option v-for="item in difficultList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属课程：" prop="courseId">
        <el-select v-model="query.courseId" placeholder="请选择所属课程" clearable>
          <el-option label="全部" value=""></el-option>
          <el-option v-for="item in coruseList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label-width="0px">
        <Cbutton @click="handleSearch" size="medium">查询</Cbutton>
        <Cbutton type="info" size="medium" @click="handleReset('searchForm')">重置</Cbutton>
      </el-form-item>
    </el-form>

    <div class="content-container">
      <div class="content-btn">
        <Cbutton @click="handleAdd">添加试题</Cbutton>
      </div>
      <el-table :data="tableList" v-loading="tableLoading" ref="tableData" border fit>
        <el-table-column label="序号" type="index" align="center" width="70"></el-table-column>
        <el-table-column prop="title" label="题目" align="center" min-width="240">
          <template slot-scope="scope">
            <div v-if="scope.row.title && scope.row.title.length > 30">
              <el-popover placement="top-start" title="" width="200" trigger="hover" :content="scope.row.title">
                <span slot="reference">{{scope.row.title.substring(0, 30)}}</span>
              </el-popover>
            </div>
            <div v-else>
              {{scope.row.title}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="pic" label="类型" align="center" min-width="100">
          <template slot-scope="scope">
            {{dealStr(scope.row.type, 'typeList')}}
          </template>
        </el-table-column>
        <el-table-column prop="type" label="难度" align="center" min-width="110">
          <template slot-scope="scope">
            {{dealStr(scope.row.difficult, 'difficultList')}}
          </template>
        </el-table-column>
        <el-table-column prop="courseId" label="所属课程" align="center" min-width="200">
          <template slot-scope="scope">
            {{dealStr(scope.row.courseId, 'coruseList')}}
          </template>
        </el-table-column>
        <el-table-column prop="rightAnswer" label="正确答案" align="center" min-width="150">
          <template slot-scope="scope">
            <div v-if="scope.row.rightAnswer && scope.row.rightAnswer.length > 15">
              <el-popover placement="top-start" title="" width="200" trigger="hover" :content="scope.row.rightAnswer">
                <span slot="reference">{{scope.row.rightAnswer.substring(0, 15)}}</span>
              </el-popover>
            </div>
            <div v-else>
              {{scope.row.rightAnswer}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="maxScore" label="分值" align="center" min-width="100"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center" min-width="160">
          <template slot-scope="scope">
            {{scope.row.createTime | glbTimeFormat}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" min-width="100">
          <template slot-scope="prop">
            <el-button type="text" size="medium" @click="handleUpdate(prop.row)">编辑</el-button>
            <el-button type="text" size="medium" style="color: #F56C6C;" @click="handleRemove(prop.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <Pagination @pageChange="getPage" :pageDefultData="{
        pageNum: query.pageNum,
        pageRow: query.pageSize,
        totalCount: totalCount }">
      </Pagination>
    </div>

    <!-- 创建试题 修改试题 -->
    <el-dialog :title="dialog.title" :visible.sync="dialog.mVisible" v-if="dialog.mVisible" width="500px" class="dialog-form">
      <el-form :model="dialog.data" :rules="dialog.rules" ref="DlalogForm" size="medium" label-width="80px">
        <el-form-item label="用户名：" prop="personName">
          <el-input v-model="dialog.data.personName" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="手机号：" prop="personMobile">
          <el-input v-model="dialog.data.personMobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="角色：" prop="roleId">
          <RoleSelect v-model="dialog.data.roleId"></RoleSelect>
        </el-form-item>
        <!-- <el-form-item label="数据权限：" prop="roleAdmin">
          <Cselect v-model="query.roleAdmin" :options="permissionsList" placeholder="请选择权限"></Cselect>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="handleCanle('DlalogForm')">取 消</el-button>
        <el-button size="medium" :loading="dialog.loading" type="primary" @click="handleDiaSub('DlalogForm')">确
          定</el-button>
      </span>
    </el-dialog>
    <!-- 创建试题 修改试题 -->

  </div>
</template>

<script>
import { GetQuestionList, RemoveQuestion, GetCourseListWithoutPage } from '@/api/train'
import { ExportList } from '@/utils'
import { UserInfoRules } from '@/utils/rules'
export default {
  name: 'questions',
  components: {},
  data () {
    return {
      query: {
        title: '',
        difficult: '',
        type: '',
        courseId: '',
        status: '',
        pageNum: 1,
        pageSize: 10
      },
      totalCount: 0,
      tableList: [],
      tableLoading: false,
      coruseList: [],
      typeList: ExportList('questionTypeList'),
      difficultList: ExportList('difficultList'),
      dialog: {
        title: '',
        mVisible: false,
        loading: false,
        oprType: 'ADD',
        data: {
          personName: '',
          personMobile: '',
          roleId: '',
          roleAdmin: '1',
          campusId: '2'
        },
        rules: UserInfoRules
      }
    }
  },
  props: {},
  watch: {},
  computed: {},
  created () {
    this.getCoruse()
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      let params = JSON.parse(JSON.stringify(this.query))
      this.tableLoading = true
      GetQuestionList(params).then(res => {
        this.tableLoading = false
        const data = res.data
        this.tableList = data.list
        this.totalCount = data.total
      }).catch(e => {
        this.tableLoading = false
      })
    },
    getCoruse () {
      GetCourseListWithoutPage().then(res => {
        const data = res.data
        data.list.forEach(e => {
          e.value = e.id
          e.label = e.title
        })
        this.coruseList = data.list
      }).catch(e => {
        this.coruseList = []
      })
    },

    handleAdd () {
      this.$router.push({ name: 'train:questions:add' })
    },
    handleUpdate (row) {
      this.$router.push({ name: 'train:questions:edit', query: { id: row.id } })
    },
    handleRemove (row) {
      this.$confirm(`确定要删除该试题吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let parmas = { id: row.id, bDelete: 1 }
        RemoveQuestion(parmas).then(res => {
          this.$message.success(res.message || '删除成功')
          this.getList()
        }).catch(() => { })
      }).catch(() => { })
    },
    handleSearch () {
      this.query.pageNum = 1
      this.getList()
    },
    handleReset (formName) {
      this.$refs[formName].resetFields()
    },
    dealStr (key, listKey) {
      const arr = this[listKey]
      let str = ''
      arr.forEach(e => {
        const valueNumber = parseInt(e.value)
        if (e.value === key || valueNumber === key) {
          str = e.label
        }
      })
      return str
    },
    getPage (val) {
      this.query.pageNum = val.pageNum
      this.query.pageSize = val.pageRow
      this.getList()
    }
  }
}

</script>
<style lang='less' scoped>
</style>
